<template>
	<view class="userinfo">
		<view class="namel">
			<u--text
			    :text="name"
			    size="48rpx"
			    color="#3D3D3D"
				align="center"
				margin="80rpx 0 28rpx"
			/>
			<u--text
			    :text="'共'+total+'人参与'"
			    size="32rpx"
			    color="#969696"
			    align="center"
			/>
		</view>
		<view class="turn">
			<view class="turn_bg flex_wrap row_middle row_center">
				<view class="turn_bg1">
					<u--text
					    :text="namePath"
					    size="40rpx"
					    color="#fff"
					    align="center"
						margin="140rpx 0 20rpx"
					/>
					<u--text
					    :text="phonePath"
					    size="40rpx"
					    color="#fff"
					    align="center"
					/>
				</view>
			</view>
			<u--text
			    text="幸运儿是谁呢~"
			    size="32rpx"
			    color="#777"
			    align="center"
			/>
		</view>
		<view class="btn" @click='active ? guess() : again()'>{{title}}</view>
		<u-modal :show="luckyDrawShow" ref="editModal" title="抽奖名称" showCancelButton @confirm="confirmEdit" @cancel="cancelEdit"
			confirmColor="#1682FF">
			<view slot="default" style="width: 100%">
				<u--input type="text" placeholder="请输入抽奖名称" clearable v-model="luckyDrawName" :customStyle="{
		                background: '#F7F7F7',
		                borderRadius: '16rpx 16rpx 16rpx 16rpx',
		                border: 'none',
		                height: '80rpx',
						marginTop:'20rpx'
		            }" :placeholderStyle="{
		                fontSize: '28rpx',
		                color: '#F7F7F7',
		            }"></u--input>
			</view>
		</u-modal>
	</view>
</template>

<script>
	import {
		listSignInByMeetId,
		drawALottery,
		launchALuckyDraw,
		startTheDraw
	} from "@/api/salesmanMeeting.js";
	export default {
		data() {
			return {
				name:'',
				salesmanId:'',
				userInfoList:[],
				Path:'未知',
				title: '开始抽奖',
				isRunning: false,
				userInfo: {},
				namePath:'点击开始',
				phonePath:'--',
				nameLists : [],
				phoneLists:[],
				total:'',
				prizeDrawId:'',
				active:true,
				luckyDrawShow:false,
				luckyDrawName:'',//抽奖名称
			};
		},
		onLoad(options) {
			this.name = options.name
			this.meetId = options.meetId;
			this.prizeDrawId = options.prizeDrawId;
			this.getMeetUserList()
		},
		onReady() {},
		methods: {
			async getMeetUserList() {
				const params = {
				    pageNum: 1,
				    pageSize: 100,
					meetSignId:this.meetId
				};
			    await listSignInByMeetId(params).then((res) => {
				   this.userInfoList = res.data.rows;
				   this.total = res.data.total
				   this.nameLists = this.userInfoList.map(item => item.nickName);
				   this.phoneLists = this.userInfoList.map(item => item.mobile);
			    });
			},
			change(e) {
				let Index = Math.ceil(Math.random() * 5) //运用random随机数自动随机生成index的下标
				this.namePath = this.nameLists[Index]
				this.phonePath = this.phoneLists[Index]
			},
			drawALotteryName() {
				drawALottery(this.prizeDrawId)
					.then((res) => {
					this.namePath = res.data.customerName
					this.phonePath = res.data.customerPhone
					})
			},
			drawALotteryStare() {
				startTheDraw(this.prizeDrawId)
					.then((res) => {
					console.log(res,'开始')
					})
			},
			guess(e) {
				let isRunning = this.isRunning;
				if (!isRunning) {
					this.title = '开奖',
						this.isRunning = true
					this.timer = setInterval((function() {
						this.change()
					}).bind(this), 50);
					this.drawALotteryStare()
				} else {
					this.title = '开始抽奖', //按钮上的字变为StART
					this.isRunning = false
					this.active = false
					this.drawALotteryName()
					this.timer && clearInterval(this.timer);
				}
			},
			again(){
				this.luckyDrawShow = true;
				this.luckyDrawName = this.name 
			},
			cancelEdit() {
				this.luckyDrawShow = false;
			},
			async confirmEdit() {
				if (!this.luckyDrawName) return uni.showToast({
					title: "请输入抽奖名称",
					icon: "none",
				});
				const params = {
					meetId: this.meetId,
					name:this.luckyDrawName
				};
				let res = await launchALuckyDraw(params);
				if (res.code === 200) {
					this.name = res.data.name
					this.prizeDrawId = res.data.id;
					this.namePath = '点击开始'
					this.phonePath = '--'
					this.cancelEdit()
					this.active = true
				}
			},
		},
	};
</script>
<style>
	page {
		background-color: #fff !important;
	}
</style>

<style lang="scss" scoped>
	/* pages/Second/Second.wxss */
	.userinfo {
		flex-direction: column;
		align-items: center;
		display: flex;
		position: relative;
		background-color: #F5F5F5 ;
		padding: 32rpx;
		height: 100vh;
	}

	.namel {
		width: 100%;
		height: 290rpx;
		background: #FFFFFF;
		border-radius: 16rpx;
		border: 2rpx solid #EDEDED;
	}
	.turn{
		width: 100%;
		height: 750rpx;
		background: #FFFFFF;
		border-radius: 16rpx;
		border: 2rpx solid #EDEDED;
		margin-top: 24rpx;
		&_bg{
			width: 408rpx;
			height: 408rpx;
			background: rgba(22,130,255,0.2);
			border-radius: 50%;
			margin: 84rpx auto 36rpx;
		}
		&_bg1{
			width: 380rpx;
			height: 380rpx;
			background: #588BF3;
			border-radius: 50%;
		}
	}
	.btn{
		width: 634rpx;
		height: 92rpx;
		background: #588BF3;
		border-radius: 40000rpx 40000rpx 40000rpx 40000rpx;
		margin-top: 96rpx;
		text-align: 36rpx;
		color: #fff;
		text-align: center;
		line-height: 92rpx;
	}
</style>